<template>
	<view :class="darkMode?'custom-dark':'custom-light'">
		<view>
			<uni-nav-bar :fixed="true" rightIcon="search" leftIcon="plus" title=" " @click-left="NewBill" @click-right="showDrawerFilter('showRight')"
			 :width="320"></uni-nav-bar>
			<uni-drawer ref="showRight" mode="right" @change="filterDrawerChange($event,'showRight')">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<form @submit="formSubmit" @reset="formReset">
							<view class="cu-form-group">
								<view class="title">单据号</view>
								<view class="text-content">
									<input class="my-uni-input" value="" type="text" v-model="txtBillNO" placeholder="[请输入单据号]" name="txtBillNO" />
								</view>
							</view>
							<view class="cu-form-group">
								<view class="title">客户</view>
								<view class="text-content">
									<input class="my-uni-input" value="" type="text" v-model="txtRelatedOrg" placeholder="[请输入客户]" name="txtRelatedOrg" />
								</view>
							</view>
							<view class="cu-form-group">
								<view class="title">开始日期</view>
								<view class="time-content">
									<picker name="dateFr" mode="date" :value="dateFr" :start="startDate" :end="endDate" @change="bindDateFrChange">
										<input class="my-uni-input" value="" type="text" v-model="dateFr" placeholder="[选择日期]"/>
									</picker>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="title">结束日期</view>
								<view class="time-content">
									<picker name="dateTo" mode="date" :value="dateTo" :start="startDate" :end="endDate" @change="bindDateToChange">
										<input class="my-uni-input" value="" type="text" v-model="dateTo" placeholder="[选择日期]"/>
									</picker>
								</view>
							</view>
							<view class="cu-form-group">
								<button type="primary" size="mini" form-type="submit">确定</button>
								<button type="default" size="mini" @click="closeDrawerFilter('showRight')">取消</button>
								<button type="default" size="mini" form-type="reset">重置</button>
							</view>
						</form>
					</scroll-view>
				</view>
			</uni-drawer>
		</view>
		<mescroll-uni :down="downOption" @init="mescrollInit" @emptyclick="downCallback" @down="downCallback" :up="upOption"
		 @up="upCallback" :fixed="false">
			<view class="mycard">
				<view v-for="item in cardList" :key="item.ID" class="card-item">
					<uni-card is-full :title="item.billno" is-shadow :extra="item.checkstatus" @tapHeader="clickCard(item)">
						<view class="audit-card-content">
							<view class="uni-flex uni-row" @tap="clickCard(item)">
								<view class="flex-item-20">日期</view>
								<view class="flex-item-80">{{item.date|dateFormate}}</view>
							</view>
							<view class="uni-flex uni-row" @tap="clickCard(item)">
								<view class="flex-item-20">客户</view>
								<view class="flex-item-80">{{item.relname}}</view>
							</view>
							<view class="uni-flex uni-row" @tap="clickCard(item)">
								<view class="flex-item-20">备注</view>
								<view class="flex-item-80">{{item.description}}</view>
							</view>
						</view>
					</uni-card>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
	import md5 from '@/common/lib/md5.min.js'
	import {
		formatDateDay
	} from '@/utils/datetime.js'
	export default {
		components: {
			MescrollUni,
			uniIcons,
			uniNavBar,
			uniDrawer,
		},
		computed: {
			...mapGetters(['themeBgColor', 'darkMode', 'user']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
		},
		data() {
			return {
				_uimainid: 3000883,
				bgColor: '#FFFFFF',
				winHeight: "", // 窗口高度
				currentTab: 0, // 预设当前项的值
				scrollLeft: 0, // tab标题的滚动条位置
				searchVal: '',
				mescroll: null,
				isPass: false,
				selectedProject: {},
				//是否显示过滤
				showRight: false,
				txtBillNO: "",
				txtRelatedOrg: "",
				dateFr: "",
				dateTo: "",
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					toTop: {
						src: '/static/img/backtop.png'
					},
					textNoMore: '没有更多数据了',
				},
				cardList: [],
			}
		},
		filters: {
			dateFormate: function(v) {
				return formatDateDay(v);
			},
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t('SaleOrder')
			})
			this.setNavBarColor()
			this.setDarkMode()
		},
		watch: {
			themeBgColor() {
				this.setNavBarColor()
			},
			darkMode() {
				this.setDarkMode()
			}
		},
		onLoad() {
			//  高度自适应
			uni.getSystemInfo({
				success: res => {
					this.winHeight = res.windowHeight
					this.winWidth = res.windowWidth
				}
			})
		},
		onShow(e) {
			// setNavBar
			this.setNavBarColor()
			// pages
			let pages = getCurrentPages()
			let currPage = pages[pages.length - 1]
			if (currPage.isDoRefresh === true) {
				currPage.isDoRefresh = false
				this.search()
			}
		},
		methods: {
			//打开窗口筛选条件
			showDrawerFilter() {
				this.$refs.showRight.open();
			},
			// 关闭窗口筛选条件
			closeDrawerFilter(e) {
				this.$refs[e].close()
			},
			//筛选条件抽屉状态发生变化触发
			filterDrawerChange(e, type) {
				//console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			//过滤提交和重置
			formSubmit: function(e) {
				var formdata = e.detail.value
				this.mescroll.formdata = formdata;
				this.cardList = [];
				this.upCallback(this.mescroll);
				this.$refs.showRight.close();
			},
			formReset(e) {
				this.dateFr = "";
				this.dateTo = "";
			},
			bindDateFrChange: function(e) {
				this.dateFr = e.target.value
			},
			bindDateToChange: function(e) {
				this.dateTo = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
				this.mescroll = mescroll;
				this.mescroll.formdata = {
					txtBillNO: "",
					txtRelatedOrg: "",
					dateFr: "",
					dateTo: "",
				};
			},
			/*下拉刷新的回调, 有三种处理方式: */
			downCallback(mescroll) {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
				mescroll.resetUpScroll() // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {
				if (!this.user) {
					mescroll.endErr()
					return
				}
				// 此时mescroll会携带page的参数:				
				mescroll.formdata._code = "M_SO_001";
				mescroll.formdata.pageindex = mescroll.num // 页码, 默认从1开始
				mescroll.formdata.pagesize = mescroll.size // 页码, 默认10
				this.$minApi.GetDataTable({
					data: mescroll.formdata
				}).then(res => {
					if (res.Status === 1) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = JSON.parse(res.Data);
						// 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
						let totalPage = 100 //res.data.length
						// 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
						let totalSize = 10000; //res.data.length
						// 接口返回的是否有下一页 (true/false)
						// let hasNext = res.hasNextPage

						if (mescroll.num == 1) this.cardList = [] //如果是第一页需手动置空列表
						this.cardList = this.cardList.concat(curPageData) //追加新数据

						// 成功隐藏下拉加载状态
						// 方法一(推荐): 后台接口有返回列表的总页数 totalPage
						mescroll.endByPage(curPageData.length, totalPage)
						this.$nextTick(() => {
							mescroll.endSuccess(curPageData.length)
						})
					} else {
						mescroll.endErr();
					}
				}).catch(exp => {
					// 失败隐藏下拉加载状态
					//console.log(exp);
					mescroll.endErr()
				})
			},
			NewBill() {
				uni.navigateTo({
					url: '/pages/sale/saleorder-edit?data=0&opt=add' 
				})
			},
			clickCard(item) {
				uni.navigateTo({
					url: '/pages/sale/saleorder-detail?data=' + item?.id
				})
			},
			setDarkMode() {
				this.darkMode ? uni.setTabBarStyle({
					backgroundColor: '#2a2b2d'
				}) : uni.setTabBarStyle({
					backgroundColor: '#ffffff'
				})
			},
			setNavBarColor() {
				// navBar-bg-color
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeBgColor,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight) {
				this.$refs.showRight.close()
				return true
			}
		},
	}
</script>
<style>
	.close {
		padding: 15px;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	/* 处理抽屉内容滚动 */
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}


	.placeholder {
		color: #8c8c8c;
		line-height: 84rpx;
		font-size: 31rpx;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
		text-align: right;
	}

	.my-uni-input {
		line-height: 84rpx;
		font-size: 31rpx;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
		text-align: right;
	}

	.cu-form-group .time-content {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		padding-right: 33rpx;
		overflow: hidden;
		position: relative;
	}

	.cu-form-group .time-content::after {
		font-family: cuIcon;
		display: block;
		content: "\E6A3";
		position: absolute;
		font-size: 31rpx;
		color: #8799a3;
		line-height: 50rpx;
		width: 50rpx;
		text-align: center;
		top: 0;
		bottom: 0;
		right: -16rpx;
		margin: auto;
	}
	
	.cu-form-group picker::after {
		content: "";
	}
</style>
